<template>
	<view class="tabBar">
		<view v-for="(item, index) of tabBarList" :key="index" :hover-class="{activeClass: true}" class="meau-item" :class="currentIndex === index ? 'active': ''" @click="handleChangeIndex(index, item.path)">
			<image v-if="currentIndex !== index" :src="item.image"></image>
			<image v-if="currentIndex === index" :src="item.selectImg"></image>
			<view>{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'tabBar',
		data() {
			return {
				currentIndex: 0,
				tabBarList: [
					{
						selectImg: '../../static/images/home/home-active.png',
						image: '../../static/images/home/home.png',
						text: '首页',
						path: '/pages/index/index'
					},
					{
						selectImg: '../../static/images/home/message-active.png',
						image: '../../static/images/home/message.png',
						text: '消息',
						path: '/pages/message/index'
					},
					{
						selectImg: '../../static/images/home/my-active.png',
						image: '../../static/images/home/my.png',
						text: '我的',
						path: '/pages/my/index'
					}
				]
			}
		},
		methods:{
			handleChangeIndex(index, path) {
				this.currentIndex = index
				this.$emit('changeIndex', index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabBar{
		width: 100%;
		height:102upx;
		background:rgba(255,255,255,1);
		box-shadow:0px 16upx 26upx 10upx rgba(0, 0, 0, 0.16);
		border-radius:42upx 42upx 0px 0px;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		.meau-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 21upx;
			line-height: 40upx;
			justify-content: center;
			align-items: center;
			image{
				width:42upx;
				height:40upx;
			}
			&:active{
				background-color: #f5f5f5;
			}
		}
		.active {
			color: #2C6ED2;
		}
	}
	.activeClass{
		background-color: #f5f5f5;
	}
</style>
